<template>
  <div>
    <my-chart ref="chart" @click="handleClick2" :options="options" autoResize></my-chart>
    <button @click="handleClick">改变echarts标题</button>
  </div>
</template>

<script>
import MyCharts from './my_charts'

export default {
  components: {
    'my-chart': MyCharts
  },
  data () {
    return {
      right: '',
        // 指定图表的配置项和数据
      options: {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          data: ['销量', '销量2']
        },
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: [{
          name: '销量'
        },
        {
          name: '销量2'
        }],
        series: [{
          name: '销量',
          yAxisIndex: 0,
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        },
        {
          name: '销量',
          type: 'bar',
          yAxisIndex: 1,
          data: [5, 20, 36, 10, 10, 20]
        }]
      }
    }
  },
  methods: {
    handleClick () {
      console.log(this.$el)
      // 这种方式不提倡
      this.options.title.text = '改变了'
      // 要改统一修改options
      let chart = this.$refs.chart
      let newOptions = {
        series: [{
          data: [10, 10, 36, 10, 10, 20]
        },
        {
          data: [10, 10, 36, 10, 10, 20]
        }]
      }
      this.$nextTick(() => {
        chart.mergeOptions(newOptions)
      })
    },
    handleClick2 () {
      console.log(333)
    }
  }
}
</script>
